<template>
  <div class="detail">
    <div class="nav">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onToSearch"
      >
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <!-- banner -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in prod.list" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <!-- 商品标题 -->
      <p>{{prod.product}}</p>
      <!-- 商品描述 -->
      {{prod.detail}}
      <!-- 价格 -->
      {{prod.price}}
      <!-- 选择数量 -->
      <p>已选 步进器</p>
      <!-- 选择地址 -->
      <p>送至 地址。</p>
    </div>
    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
import request from "@/utils/request";
export default {
  name: "Detail",
  data() {
    return {
      prod: {}
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onToSearch() {
      this.$router.push({ path: "/search" });
    }
  },
  created() {
    console.log(this.$route.query.id);
    request({
      method: "GET",
      url: "/api/shop/find",
      params: {
        id: this.$route.query.id
      }
    }).then(data => {
      this.prod = data;
    });
  }
};
</script>

<style lang="less" scoped>
.van-swipe .van-swipe-item {
  width: 375px;
  height: 375px;
  color: #fff;
  font-size: 20px;
  line-height: 375px;
  text-align: center;
  background: pink;
  img {
    width: 100%;
    height: 100%;
  }
}

// .pic {
//   width: 375px;
//   height: 375px;
//   img {
//     width: 100%;
//     height: 100%;
//   }
// }
</style>
